<template>
  <div class="login">
    <div class="main"> 
        <div>
            <div class="reg_font">
                <span>如未注册,点此</span>
                <router-link to="/register">注册</router-link>
            </div>
            <div class="table">
                <div class="_icon">
                    <img src="/img/login/35.png">
                    <span>会员登录</span>
                </div>
                <div class="content">
                    <div class="inputPhone">
                        <input type="text" placeholder="用户名、手机" v-model="uname" @blur="checkUname">
                    </div>

                    <div class="font1">
                        <div :style="unameState">
                            <img src="/img/login/X-icon.png">请输入4~12位字符
                        </div>
                        <div :style="unameState2">
                            <img src="/img/login/√-icon.png">格式正确
                        </div>
                    </div>
                    <div class="inputupwd">
                        <input type="text" placeholder="密码" v-model="upwd" @blur="checkUpwd">
                    </div>
                    <div class="font2">
                        <div :style="upwdState">
                            <img src="/img/login/X-icon.png">请输入6~12位字符
                        </div>
                        <div :style="upwdState2">
                            <img src="/img/login/√-icon.png">格式正确
                        </div>                       
                    </div>
                    <div class="ch_box">
                        <input type="checkbox">
                        <span> 请保存我这次的登录信息</span>
                        <router-link to="#">短信找回密码?</router-link>
                    </div>
                    <div class="font3"></div>
                    <div class="btn">
                       <input @click="checkForm" type="submit" value="登 录" class="submit_btn">
                    </div>
                </div>
            </div>
        </div>
    </div>   
  </div>
</template>


<script>
import MyHeader from '../components/MyHeader.vue'
export default {
  components: { MyHeader },

    data(){
        return {
            uname:"",
            upwd:"",
            unameState:"display:none",
            upwdState:"display:none",
            upwdState2:"display:none",
            unameState2:"display:none",
        }
    },
    methods: {
        //验证用户名
        checkUname(){
            let reg = /^\w{4,12}$/;
            if(reg.test(this.uname)){ //true 验证成功
                this.unameState = "display:none";
                this.unameState2 = "display:block";              
                return true;
            }else{ //false 不符合格式要求
                this.unameState = "display:block";
                this.unameState2 = "display:none";
                return false;
            }
        },
        //验证密码
        checkUpwd(){
            let reg = /^\w{6,10}$/;
            if(reg.test(this.upwd)){  //true 验证成功
                this.upwdState = "display:none";
                this.upwdState2 = "display:block";
                 return true;
            }else{ // false 不符合格式要求
                this.upwdState = "display:block";
                this.upwdState2 = "display:none";
                return false;
            }
        },
        //验证表单,点击按钮后触发
        checkForm(){
            if(this.checkUname() && this.checkUpwd()){
                //发送注册请求,实现注册业务
                let url = `/ub/login?uname=${this.uname}&upwd=${this.upwd}`;
                this.axios.get(url).then(result=>{
                    console.log(result)
                    if(result.data.code==200){
                        let user = result.data.result;
                        this.$store.commit("updateLoginState",user);

                        //把用户信息存入sessionStroage.刷新页面时用
                        sessionStorage.setItem("islogin",1)
                        sessionStorage.setItem("user",JSON.stringify(user))

                        this.$router.push("/")
                    }else{
                        alert("登录失败:账号或者密码有误")
                    }
                })
            }
        }
    }
}
</script>


<style scoped>
.main{
    width: 980px;
    margin: 40px auto 0 auto;
}
.main .reg_font{
    text-align: right;
    margin-bottom: 70px;
    font-size: 14px;
}
.main .reg_font a{
    background-color: #c3625d;
    color: #fff;
    padding: 3px 8px ;
    margin-left: 5px;
    border-radius: 2px;
    font-size: 14px;
}
.uname-icon,.upwd-icon{
    display: inline-block;
    left: -30px;
    width: 16px;
    height: 16px;
    top: 3px;
    /* background-color: #f0f;*/
    background-image: url(/img/login/√-icon.png);
    position: relative;
}
.uname-icon2{
   background-image: url(/img/login/X-icon.png);
}
.uname-icon3{
   background-image: url(/img/login/o-icon.png);
}
.uname-i{
    margin-top: 10px;
}
.main .reg_font a:hover{
    color: #111;
}
.main .table{
    width: 980px;
    height: 385px;
    border: 1px solid #eee;
    border-radius:8px;
    box-shadow: 1px 1px 5px rgb(98 105 109 / 50%);
}
.table ._icon{
    font-size: 18px;
    color: #c3625d;
    height: 56px;
    line-height: 60px;
    border-bottom: 1px solid #c3625d;
}
.table ._icon img{
    margin-top: -8px;
}
.table .content{
    height: 228px;
    width: 400px;
    margin: 50px auto;
}
.table .content .font1,.font2,.font3{
    height: 28px;
    text-align: left;
    color: #f00;
    font-size: 12px;
    line-height: 28px;
}

.inputPhone,.inputupwd{
    display: flex;
    width: 418px;
}
.table .content .inputPhone input,.table .content .inputupwd input{
    width: 370px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color:#ccc;
    border: 1px solid #ccc;
    padding: 0 14px;
    margin-left: -3px;
}
.table .content .ch_box a{
    margin-left: 136px;
    font-size: 14px;
    color: #c3625d;
}
.table .content .ch_box span{
    font-size: 14px;
}
.table .content .ch_box input{
    display: block;
    float: left;
    margin-top: 2px;
}
.table .content .submit_btn{
    width: 400px;
    height: 48px;
    background-color: #e73736;
    outline: none;
    border: 0;
    font-size: 18px;
    color: #fff;
}

</style>